<template>
    <Card>
        <add-crop-data
                :showModal="cropForm.showModal"
                :cropForm="cropForm"
                :okModal="okModal"
                :cancelModal="cancelModal"
        ></add-crop-data>

        <!--搜索-->
        <Row slot="title" type="flex" align="middle">
            <Col span="16">
            <Button type="info" icon="plus" @click="add">添加</Button>
            </Col>
            <Col span="8">
            <div align="right">
                <Input v-model="search">
                <span slot="prepend">作物名称：</span>
                <Button slot="append" icon="ios-search"></Button>
                </Input>
            </div>
            </Col>
        </Row>
        <!--表格数据-->
        <div class="edittable-table-height-con">
            <Table stripe border refs="table3" :columns="columnsList" :data="tableData"></Table>
            <!--<editable-table refs="table3" :columns-list="columnsList" :table-data="tableData" :saveEdit="saveEdit" :deleteRow="deleteRow"></editable-table>-->
        </div>
        <div align="right">
            <Page :total="10" show-elevator></Page>
        </div>
    </Card>
</template>
<style>
    /*@import 'markdown-editor.less';*/
    body {
        background-color: #ff0000;
    }
</style>
<script>
    import InputNumber from "../../../../node_modules/iview/src/components/input-number/input-number.vue";
    import AddCropData from './addCropData.vue'
    //    import EditableTable from '../../tables/components/editableTable.vue'
    import Cookies from 'js-cookie'
    import {getCropClassify} from '../../../api'

    const ATextBtn = (h, text, url) => {
        return h('a', {
            attrs: {
                href: url,
            }
        }, text)
    }
    export default {
        components: {
            InputNumber,
//            EditableTable,
            AddCropData
        },
        data() {
            return {
//                showModal: false,
                tableData: [
                    {
                        name: '春玉米001',
                        classify: '粮食作物/玉米',
                        syzq: '生育周期',
                        images: 'http://gb.cri.cn/mmsource/images/2014/06/06/49/2593136740881584265.jpg'
                    }
                ],
                search: '',
                classifyData:[],
                columnsList: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 80,
                        align: 'center'
                    },
                    {
                        title: '作物名称',
                        align: 'center',
                        key: 'name',
                        editable: true
                    },
                    {
                        title: '分类',
                        align: 'center',
                        key: 'classify',
                        editable: true
                    },
                    {
                        title: '生产操作规范',
                        align: 'center',
                        width: 120,
                        key: 'syzq',
                        render: (h, params) => {
                            return ATextBtn(h, '编辑', "#/edit_production_operation/index");
                        }
                    },
                    {
                        title: '推荐施肥',
                        align: 'center',
                        width: 100,
                        key: 'handle',
                        render: (h, params) => {
                            return ATextBtn(h, "编辑", "#/data_manage/recom_fert")
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 200,
                        key: 'handle',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params);
                                        }
                                    },
                                }, "编辑"),
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: "您确认删除这条内容吗？",
                                        trnsfer: true,
                                    },
                                    on: {
                                        'on-ok': () => {
                                            this.delete(params)
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small',
                                        },
                                    }, "删除")
                                ])
                            ])
                        }
                    }
                ],
                cropForm: {
                    name: '',
                    classifyData: [],
                    classifyValues: [],
                    classify: '',
                    lifecycle: '',
                    lifecycleDayNum: 1,
                    uploadList: [],
                    description: "",
                    showModal: false,
                    optionsType: 'edit',//默认为编辑类型的弹窗
                },
                classifyValue: [],
                choseRow: {},//当前选中行
            };
        },
        created() {
            this.getData();
        },
        mounted() {
        },
        methods: {

            //添加作物
            add: function () {
                this.clearData();
                this.cropForm.optionsType = 'add';
                this.cropForm.showModal = true;
            },
            edit: function (params) {
                this.choseRow = params;
                var row = params.row;
                //todo 这里将该行的数据传递到编辑框
                this.cropForm.name = row.name;
                this.cropForm.classifyValues = row.classify.split("/");
                this.cropForm.showModal = true;
                this.cropForm.optionsType = 'edit';
            },
            delete: function (params) {
                this.$Message.success("删除成功！")
                this.tableData.splice(params.index, 1);
            },
            //清空表格对象
            clearData: function () {
                this.cropForm.name='';
                this.cropForm.classify='';
                this.cropForm.lifecycle='';
                this.cropForm.lifecycleDayNum=1;
                this.cropForm.description='';
                this.cropForm.showModal=false;
                this.cropForm.classifyValues=[];
            },
//            弹窗回调
            okModal: function () {
                var name = this.cropForm.name;
                var classify = "";
                for (var i = 0; i < this.cropForm.classifyValues.length; i++) {
                    classify = classify + this.cropForm.classifyValues[i];
                    if (i < this.cropForm.classifyValues.length - 1) {
                        classify = classify + "/"
                    }
                }
                console.log("分类", this.cropForm.classifyValues);
                if (this.cropForm.optionsType == 'edit') {
                    //编辑状态
                    this.tableData[this.choseRow.index].name = name;
                    this.tableData[this.choseRow.index].classify = classify;
                } else {
                    let data = {
                        name: name,
                        classify: classify,
                        lifecycle: '',
                        lifecycleDayNum: 1,
                        syzq: '生育周期',
                    }
                    //增加状态
                    this.tableData.push(data)
                }
                this.$Message.info("保存");
            },
            cancelModal: function () {},
        },
        created() {
            //获取级联数据
            let params={
                access_token: Cookies.get('access_token'),
            }
            getCropClassify(params)
                .then(res=>{
                    this.cropForm.classifyData=res;
                })
        }
    }
</script>